<template>
  <div :class="className" :id="className" :style="{ height: height, width: width }" />
</template>

<script>
import * as echarts from 'echarts';

require('echarts/theme/macarons'); // echarts theme

export default {
  props: {
    className: {
      type: String,
      default: 'chartmain',
    },
    width: {
      type: String,
      default: '100%',
    },
    height: {
      type: String,
      default: '350px',
    },
    autoResize: {
      type: Boolean,
      default: true,
    },
    legendShow: {
      type: Boolean,
      default: true,
    },
    chartData: {
      type: Object,
      required: true,
    },
    str: {
      type: String,
      default: '%',
    },
  },
  data() {
    return {
      chart: null,
    };
  },
  watch: {
    str(val) {
      return val;
    },
    chartData: {
      deep: true,
      handler(val) {
        if (this.chart) {
          this.chart.clear();
          this.setOptions(val);
        }
      },
    },
  },
  mounted() {
    this.$nextTick(() => {
      setTimeout(() => {
        this.initChart();
      }, 80);
    });
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    initChart() {
      var chartDom3 = document.getElementById(this.className);
      this.chart = echarts.init(chartDom3);

      this.chart.clear();
      this.setOptions(this.chartData);
    },
    setOptions({ expectedData, date, name, lenged } = {}) {
      let that = this;
      this.chart.setOption({
        xAxis: {
          data: date,
          boundaryGap: false,
          axisTick: {
            show: true,
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            textStyle: {
              color: '#7C8CA5',
            },
          },
        },
        grid: {
          left: lenged == 'left' ? '18%' : 20,
          right: 40,
          bottom: this.legendShow ? 50 : 10,
          top: 10,
          containLabel: true,
          width: lenged == 'left' ? '79%' : '89%',
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
          },
          formatter: function(params) {
            let str = '';
            let time = '';
            params.forEach((element) => {
              time = element.name + '<br/>';
              str +=
                '<span>' +
                element.seriesName +
                "</span><span style='float:right;margin-left:10px;font-weight: bold;' > " +
                element.value +
                that.str +
                '</span><br/>';
            });

            return time + str;
          },
          // formatter: '{a} {c}'+this.str,
          // formatter : '{a0}:{c0}'+this.str+'<br />{a1}:{c1}'+this.str+'<br />{a2}:{c2}'+this.str,
          padding: [5, 10],
        },
        yAxis: {
          axisTick: {
            show: false,
          },
          // minInterval: 1, //设置成1保证坐标轴分割刻度显示成整数。
          axisLine: {
            show: false,
            textStyle: {
              color: '#7C8CA5',
            },
          },
          axisLabel: {
            textStyle: {
              color: '#7C8CA5',
            },
          },
        },
        legend: {
          show: this.legendShow,
          data: name,
          x: lenged == 'left' ? 'left' : 'center', // 'center' | 'left' | {number},
          y: lenged == 'left' ? 'center' : 'bottom', // 'center' | 'bottom' | {number}
          orient: lenged == 'left' ? 'vertical' : 'horizontal', //vertical垂直显示 //horizontal 横排
          padding: [10, 10, 10, 10],
          lineHeight: 50,
          textStyle: {
            color: '#7c8ca5',
          },
          // textStyle:{
          //   lineHeight:50
          // },
        },
        series: [
          {
            name: name && name.length > 0 && name[0],
            itemStyle: {
              normal: {
                color: '#289DF5',
                lineStyle: {
                  color: '#289DF5',
                  width: 2,
                },
              },
            },
            areaStyle: {
              //折现下方阴影
              normal: {
                color: {
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: '#d2e7f2', // 0% 处的颜色
                    },
                    {
                      offset: 0.7,
                      color: '#d2e7f2', // 100% 处的颜色
                    },
                  ],
                  globalCoord: false, // 缺省为 false
                },
              },
            },
            type: 'line',
            data: expectedData[0],
            animationDuration: 2800,
            animationEasing: 'cubicInOut',
          },
          {
            name: name[1],
            type: 'line',
            itemStyle: {
              normal: {
                color: '#FBC225',
                lineStyle: {
                  color: '#FBC225',
                  width: 2,
                },
                areaStyle: {
                  color: '#f3f8ff',
                },
              },
            },
            data: expectedData[1],
            animationDuration: 2800,
            animationEasing: 'quadraticOut',
          },
          {
            name: name[2],
            type: 'line',
            itemStyle: {
              normal: {
                color: '#66B92E',
                lineStyle: {
                  color: '#66B92E',
                  width: 2,
                },
                areaStyle: {
                  color: '#f3f8ff',
                },
              },
            },
            data: expectedData[2],
            animationDuration: 2800,
            animationEasing: 'quadraticOut',
          },
          {
            name: name[3],
            type: 'line',
            itemStyle: {
              normal: {
                color: '#D65B4A',
                lineStyle: {
                  color: '#D65B4A',
                  width: 2,
                },
                areaStyle: {
                  color: '#f3f8ff',
                },
              },
            },
            data: expectedData[3],
            animationDuration: 2800,
            animationEasing: 'quadraticOut',
          },
          {
            name: name[4],
            type: 'line',
            itemStyle: {
              normal: {
                color: '#896DE5',
                lineStyle: {
                  color: '#896DE5',
                  width: 2,
                },
                areaStyle: {
                  color: '#f3f8ff',
                },
              },
            },
            data: expectedData[4],
            animationDuration: 2800,
            animationEasing: 'quadraticOut',
          },
        ],
      });
    },
  },
};
</script>
